<template>
  <div>
    <el-card style="margin: 10px; height: 85vh">
      <el-button type="primary" size="small" @click="addExamine">
        审批配置
      </el-button>
      <el-dialog title="审批配置" :visible.sync="dialogFormVisible" width="38%" :before-close="cancel">
        <div class="formWrap" style="height: 360px; overflow: auto">
          <div class="formBox">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
              <el-form-item :class="isCount == index ? 'formItem formItems' : 'formItem'"
                v-for="(item, index) in ruleForm.examineArr" :label="digit[index] + '级审批'" :key="index"
                :prop="'examineArr[' + index + '].examineArrCheck'" :rules="{
                  required: true,
                  message: '输入不得为空',
                  trigger: 'blur',
                }" @mouseenter.native="mouseEnter(index)" @mouseleave.native="isCount = 20">
                <el-button class="deleteBtn" size="small" type="info" icon="el-icon-delete" v-if="
                  isCount == index && ruleForm.examineArr.length > 1
                    ? true
                    : false
                " @click="deleteFn(index)">
                </el-button>
                <el-select v-model="item.examineArrCheck" collapse-tags filterable multiple placeholder="请选择">
                  <el-option v-for="(dict, dictIndex) in item.examineArrOptions" :key="dictIndex" :label="dict.label"
                    :value="dict.value">
                    <el-checkbox style="pointer-events: none" :value="item.examineArrCheck.includes(dict.value)">
                      {{ dict.label }}
                    </el-checkbox>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <el-timeline>
            <el-timeline-item v-for="(val, index) in count" :key="index" color="#0091FF">
              <div style="height: 50px"></div>
            </el-timeline-item>
            <el-timeline-item color="#0091FF" v-if="count == 10 ? false : true">
              <template #dot>
                <el-button icon="el-icon-plus" class="plusBtn" @click="addTimeline">
                </el-button>
              </template>
              添加审批流
            </el-timeline-item>
          </el-timeline>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ruleForm: {
        examineArr: [
          {
            examineArrLabel: "一级审批",
            examineArrOptions: [
              {
                value: "选项1",
                label: "选项1",
              },
              {
                value: "选项2",
                label: "选项2",
              },
              {
                value: "选项3",
                label: "选项3",
              },
              {
                value: "选项4",
                label: "选项4",
              },
            ],
            examineArrCheck: [],
          },
        ],
      },

      select: ["选项1", "选项2"],

      value: "",
      dialogFormVisible: true,
      activities: [
        {
          color: "#0091FF",
        },
      ],
      count: 1,
      isCount: 20,
      digit: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"],
    };
  },
  created () { },
  mounted () { },
  components: {},
  props: {},
  computed: {},
  methods: {
    getExamine () {
      return this.ruleForm.examineArr.some((item) => {
        if (item.examineArrCheck.length > 0) {
          return true;
        }
      });
    },
    cancel () {
      if (!this.getExamine()) {
        this.dialogFormVisible = false;
        return;
      }
      this.$confirm(
        "您编辑的信息尚未保存，离开后内容将会丢失",
        "确定要离开吗?",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: "取消审批!",
          });
          this.dialogFormVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    deleteFn (index) {
      // 点击【删除】按钮，若该流程在途中，不可删除节点，删除节点失败，提示“删除失败，不可删除在途中的审批节点”如下图)
      let examineArr = this.ruleForm.examineArr;
      if (!examineArr[index].examineArrCheck.length) {

        examineArr.splice(index, 1);
        this.count = examineArr.length;
      } else {
        this.$confirm('不可删除在途中的审批节点?', '删除失败', {
          confirmButtonText: '我知道了',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    mouseEnter (index) {
      this.isCount = index;
    },
    addTimeline () {
      this.count++;
      this.ruleForm.examineArr.push({
        examineArrLabel: `${this.digit[this.count - 1]}级审批`,
        examineArrOptions: [
          {
            value: "选项1",
            label: "选项1",
          },
          {
            value: "选项2",
            label: "选项2",
          },
          {
            value: "选项3",
            label: "选项3",
          },
          {
            value: "选项4",
            label: "选项4",
          },
        ],
        examineArrCheck: [],
      });
    },
    addExamine () {
      this.dialogFormVisible = true;
      this.count = 1;
      Object.assign(this.ruleForm, {
        examineArr: [
          {
            examineArrLabel: "一级审批",
            examineArrOptions: [
              {
                value: "选项1",
                label: "选项1",
              },
              {
                value: "选项2",
                label: "选项2",
              },
              {
                value: "选项3",
                label: "选项3",
              },
              {
                value: "选项4",
                label: "选项4",
              },
            ],
            examineArrCheck: [],
          },
        ],
      });
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.dialogFormVisible = false;
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.plusBtn {
  display: block;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  color: white;
  background: #0091ff;
  padding: 0;
  margin: 0;
}

.formWrap {
  position: relative;

  .formBox {
    width: 80%;
    left: 46px;
    z-index: 999;
    position: absolute;

    .formItem {
      height: 78px;
      margin-bottom: 0;
      position: relative;
      margin-left: 20px;

      .deleteBtn {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 500;
        background: none;
        border: 0;
      }
    }

    .formItems {
      background: #90939954;
    }
  }
}
</style>
